import React, { FC, useContext } from 'react';
import { storeContext } from '../store/context';
import { observer } from 'mobx-react-lite';
import switchImg from '../../../public/img/switch.svg';
import './index.less';

const Journey: FC = (props) => {
  const store = useContext(storeContext);
  const { from, to, exchangeFromTo } = store;
  const handleExchange = () => {
    exchangeFromTo();
  };
  return (
    <div className="journey">
      <div className="journey-station">
        <input
          type="text"
          readOnly
          name="from"
          value={from}
          className="journey-input journey-from"
        />
      </div>
      <div className="journey-switch" onClick={handleExchange}>
        <img src={switchImg} width="70" height="40" alt="switch" />
      </div>
      <div className="journey-station">
        <input
          type="text"
          readOnly
          name="to"
          value={to}
          className="journey-input journey-to"
        />
      </div>
    </div>
  );
};

export default observer(Journey);
